<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>迎新数据监控平台</title>

    <!-- Bootstrap -->
    <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- convert css  -->
    <link href="./asset/cover.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
		
	  <div class=" ">
		<h1 class="md-head text-center">
			2017年秋季迎新数据监控
			<a class="btn  pull-right" href="#reflesh" onclick="reloadit();" >刷新</a>
		</h1>
	  </div>
	  
      <div class="row">

        <!-- middle  -->
        <div class="col-md-6 middle">
          <div class="lb-all bg-alp" title2="交费人数">
            <div class="col-xs-6 text-right">
              <div class="lb-jfrs">报到总人数</div>
              <div class="lb-jzrq">截止<span id="jzrq-time"></span></div>
            </div>
            <div class="col-xs-6">
              <div class="text-left">
                <i class="jfrs" id="e-zrenshu"> </i>人
              </div>
            </div>
          </div>
          <div class="bg-alp clearfix" title2="系部报到人数柱形图统计">
            <div id="ec_xb_rs" style=" height:300px;"></div>
          </div>
          <div class="bg-alp clearfix" title2="按班级、性别饼图统计">
            <div id="ec_zy" style=" height:240px;"></div>
          </div>

        </div>
        <!--/middle  -->

        <!-- right  -->
        <div class="col-md-6 right">
          <div class="bg-alp" title2="内宿外宿饼图统计">
            <div id="ec_zs_neiwai" style="height:100px"></div>
          </div>
          <div class="bg-alp" title2="床位情况统计">
            <div id="ec_zs_chuangwei" style="height:200px"></div>
          </div>
          <div class="bg-alp" title2="分宿舍楼统计横条图">
            <div id="ec_zs_lou" style="height:400px;"></div>
          </div>
        </div>
        <!--/right  -->


      </div>
	  
	   <h3 class="text-center" style="margin-top:1em;">
		报到人数表
	    <button type="button" data-target="rsb2" class="btnRSB btn btn-success pull-right" >按班级查看</button>
	    <button type="button" data-target="rsb1" class="btnRSB btn btn-success pull-right" style="display:none">按专业查看</button>
		
	   </h3>
	   
	  <div id="rsb1" class="row rsb zy_rs">
		
        <!-- 各专业交费明细表 -->
        <div class="col-md-6">
          <table class="table table-bordered table-condensed">
            <thead>
              <tr>
                <th style="min-width:65px;">院系</th>
                <th>类别及专业</th>
                <th style="min-width:45px;">人数</th>
              </tr>
            </thead>
            <tbody id="zy_rs_tbody1" >
            </tbody>
          </table>
        </div>
        <div class="col-md-6">
          <table class="table table-bordered table-condensed">
            <thead>
              <tr>
                <th style="min-width:65px;">院系</th>
                <th>类别及专业</th>
                <th style="min-width:45px;">人数</th>
              </tr>
            </thead>
            <tbody id="zy_rs_tbody2" >
            </tbody>
          </table>
        </div>
        <!-- /各专业交费明细表  -->
		
	  </div>

	  
	  <div id="rsb2" class="row rsb bj_rs" style="display:none">
		
        <!-- 各班级明细表 -->
        <div class="col-md-6">
          <table class="table table-bordered table-condensed">
            <thead>
              <tr>
                <th style="min-width:65px;">院系</th>
                <th>班级</th>
                <th style="min-width:45px;">人数</th>
              </tr>
            </thead>
            <tbody id="bj_rs_tbody1" >
            </tbody>
          </table>
        </div>
        <div class="col-md-6">
          <table class="table table-bordered table-condensed">
            <thead>
              <tr>
                <th style="min-width:65px;">院系</th>
                <th>班级</th>
                <th style="min-width:45px;">人数</th>
              </tr>
            </thead>
            <tbody id="bj_rs_tbody2" >
            </tbody>
          </table>
        </div>
        <!-- /各班级明细表  -->
		
	  </div>

	  
    </div>

	<div class="container">
	  <div class="row bg-alp clearfix" title2="总人数增长曲线">
		<div id="ec_seri_zong" style=" height:300px;"></div>
	  </div>
	</div>
	
	
	<div class="container" style="padding-top:1em;">
		数据周期性更新，可能存在误差，刷新重新获取。<br/>
		  数据源：青果系统 &nbsp; POWERED BY GXGJ.COM <br/>
		  <a class="btn btn-success" href="#reflesh" onclick="reloadit();" >刷新</a> 
		  <label>
			 <input type="checkbox" name="auto_reload" value="1" id="chkbox_auto_reload"> 每隔5分钟刷新
		  </label>
	</div>

<div id="chromeDownLoad" style="display:none; background:blue; font-size:18px; text-align:center">
<h1>请更换浏览器！</h1>
<h2>本页面很高大上，不幸的是您的浏览器不支持某些功能。</h2>
您现在使用的是饱受诟病的IE浏览器（或者使用了基于IE内核的浏览器），建议您使用性能更好速度更快的浏览器。<br />
如果您是在360浏览器、搜狗浏览器等双核浏览器中，请切换到“高速模式”。<br />
或者您也可以下载<a href="http://down.tech.sina.com.cn/page/40975.html" target="_blank">谷歌浏览器</a>。 
</div>



    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
    <script src="./asset/echarts.min.js"></script>


  </body>
</html>

<script>

var ie =  !-[1,];  // 这是世界上最短的ie判断代码
if(ie){
		
	  $('#chromeDownLoad').show().siblings().hide(200);
		
}

function reloadit(){
	if(isWeiXin()){
		window.location.href = window.location.href ;
	}else{
		window.location.reload();
	}
}

function isWeiXin(){
    var ua = window.navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i) == 'micromessenger'){
        return true;
    }else{
        return false;
    }
}

window.onerror = function(){ return true;}

</script>


<script>

var glbData = {};
var glbSeri = {};
var intervalR; //

$(function(){

	$.ajax({  
		type: "get",  
		async: false,  
		url: "/my.php?s=/Monitor/getAllData/",  
		dataType: "jsonp",  
		success: function(data){  
			//console.log(data); 
			glbData = data;
			loadChars();
		},  
		error: function(){  
			alert('数据加载失败，请重试');  
		}
	});
	
	$.ajax({  
		type: "get",  
		async: false,  
		url: "/my.php?s=/Monitor/getZongSeries/",  
		dataType: "jsonp",  
		success: function(data){  
			console && console.log(data); 
			glbSeri = data;
			loadSeri();
		},  
		error: function(){  
			alert('数据加载失败，请重试');  
		}
	});

	$(".btnRSB").on("click",function(ev){
		var $this = $(this);
		var target_id = $this.data("target");
		$(".btnRSB").show();
		$this.hide();
		$(".rsb").hide();
		$("#"+target_id).show();
	});
	
	$("#chkbox_auto_reload").on("change",function(){
		var ck = this.checked;
		if(ck){
			intervalR = setInterval("reloadit()", 10000 );
		}else{
			clearInterval(intervalR);
		}
	});
	
});


function loadSeri(){
	
	// 截止日期
	$("#jzrq-time").text( glbSeri.count[glbSeri.count.length-1].time );
	
    // 总人数增长曲线
    var char_seri_zong = echarts.init(document.getElementById('ec_seri_zong'));
    var char_seri_zong_opt = {

        title : {
            show: true, 
            text: '总人数增长曲线',
            x:'center',
            textStyle: {
              color: "#FFFFFF",
              fontSize: 12
            }
        },
		color:['#ff0'],
        tooltip : {
            trigger: 'axis',
            formatter: "{a} <br/>{b} : {c}人"
        },
		xAxis: {
			type: 'category',
			boundaryGap: false,
			axisLine: {
			  lineStyle: {
				  color: 'rgb(255,255,255)'
			  }
			},
			axisLabel: {
				show:true,
				textStyle: {
					color : 'rgb(255,255,255)',
					fontSize: 10 
				}
		    },
			data: function(){
				var arr = [];
				$.each(glbSeri.count,function(i,row){
					arr.push(row.time);
				});
				return arr;
			}()
		},
		yAxis: {
			type: 'value',
			axisLine: {
			  lineStyle: {
				  color: 'rgb(255,255,255)'
			  }
			},
			  axisLabel: {
				  textStyle: {
					  color : 'rgb(255,255,255)',
					  fontSize: 10 
				  }
			  },
		},
		series: [
			
			{
				name:'总人数',
				type:'line',
				stack: '总量',
				data: function(){
					var arr = [];
					$.each(glbSeri.count,function(i,row){
						arr.push(row.count_xs);
					});
					return arr;
				}()
			}
		]


    };
    char_seri_zong.setOption(char_seri_zong_opt);

}

function loadChars(){
	// 总人数
	$("#e-zrenshu").text(glbData.zrenshu);

    // 内宿外宿饼图统计
    var char_zs_neiwai = echarts.init(document.getElementById('ec_zs_neiwai'));
    var char_zs_neiwai_opt = {

        title : {
            show: false, 
            text: '内外宿统计',
            x:'center',
            textStyle: {
              color: "#FFFFFF",
              fontSize: 12
            }
        },
        color: ['#ca8622', '#bda29a','#6e7074', '#546570'],
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient:"verticle",
            left : 'left',
            top : 'middle',
            textStyle: {
                color:"#FFF",
            },
            data:['内宿生','外宿生']
        },
        calculable : true,
        series : [
            {
                name:'内外宿',
                type:'pie',
                radius : [0, '70%'],
                center : ['60%', '50%'],
                lableLine: {
                    normal: {
                        show: true 
                    },
                    emphasis: {
                        show: true
                    }
                },
                itemStyle: {
                  normal: {
                      label: {
                          show: true,//是否展示  
                          position: 'inside',
                          formatter: '{b} {c}'
                      }
                  }
                }, 
                data:[
                    {value: parseInt(glbData.neiwai.nei.nan) + parseInt(glbData.neiwai.nei.nv), name:'内宿生'},
                    {value: parseInt(glbData.neiwai.wai.nan) + parseInt(glbData.neiwai.wai.nv), name:'外宿生'},
                ]
            }
        ]


    };
    char_zs_neiwai.setOption(char_zs_neiwai_opt);

    // 男女床位情况统计
    var char_zs_chuangwei = echarts.init(document.getElementById('ec_zs_chuangwei'));
    var char_zs_chuangwei_opt = {

      title : {
          show: false, 
          text: '男女床位情况统计',
          x:'center',
          textStyle: {
            color: "#FFFFFF",
            fontSize: 12
          }
      },
      tooltip : {
          trigger: 'axis',
          axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'line'        // 默认为直线，可选为：'line' | 'shadow'
          }
      },
      color:['rgb(255,190,0)','rgb(131,188,92)'],
      barMaxWidth:"40%",
      legend: {
          bottom: 'bottom',
          data: ['已住', '空闲'],
          textStyle:{
            color:"#FFF"
          },
      },
      yAxis:  {
          type: 'value',
          axisLabel: {
              textStyle: {
                  color : 'rgb(255,255,255)',
                  fontSize: 10 
              }
          },
      },
      xAxis: {
          type: 'category',
          axisLabel: {
              textStyle: {
                  color : 'rgb(255,255,255)',
                  fontSize: 10 
              }
          },
          data: ['男生','女生']
      },
      series: [
          {
              name: '已住',
              type: 'bar',
              stack: '总量',
              label: {
                  normal: {
                      show: true,
                      //position: 'insideCenter'
                  }
              },
              data: [ glbData.nannv_cw.nan.yxcws  , glbData.nannv_cw.nv.yxcws]
          },
          {
              name: '空闲',
              type: 'bar',
              stack: '总量',
              label: {
                  normal: {
                      show: true,
                      //position: 'insideRight'
                  }
              },
              data: [ glbData.nannv_cw.nan.kxcws  , glbData.nannv_cw.nv.kxcws]
          }
          
      ]


    };
    char_zs_chuangwei.setOption(char_zs_chuangwei_opt);
	
	
    // 系部人数图表
    var char_xb_rs = echarts.init(document.getElementById('ec_xb_rs'));
    var char_xb_rs_opt = {
      title: {
          show: false,
          text: '系部'
      },
      tooltip: {},
      legend: {
          show: false,
          data: ['人数']
      },
      textStyle: {
          color: 'rgb(255, 255, 255)'
      },
      itemStyle: {
          normal: {
              // 设置扇形的颜色
              color: 'rgba(127,188,96,0.9)',
              shadowBlur: 20,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
      },
      xAxis: {
          axisLine: {
              lineStyle: {
                  color: 'rgb(255,255,255)'
              }
          },
          axisLabel: {
              textStyle: {
                  color : 'rgb(255,255,255)',
                  fontSize: 10 
              }
          },
          data: function(){
			var arr = [];
			$.each(glbData.yx_rs,function(i,t){
				arr.push(
				  t.YX_MC.replace('技术','').replace('工程','').replace('文化旅游','文旅')
				);
			});
			return arr;
		    //return ["数控系","机械系","汽车系","电气系","信息系","文旅系"]
		  }()
      },
      yAxis: {
          axisLine: {
              lineStyle: {
                  color: 'rgb(255,255,255)'
              }
          },
          axisLabel: {
              textStyle: {
                  color : 'rgb(255,255,255)',
                  fontSize: 8 
              }
          }
      },
      series: [{
          name: '人数',
          type: 'bar',
          //顶部数字展示pzr  
          itemStyle: {
              normal: {
                  label: {
                      show: true,//是否展示  
                  }
              }
          },  
          data: function(){
			var arr = [];
			$.each(glbData.yx_rs,function(i,t){
				arr.push(t.count);
			});
			return arr;
		  }()
      }]
      



    };
    char_xb_rs.setOption(char_xb_rs_opt);

    // 专业统计(包括男女)
    var char_zy = echarts.init(document.getElementById('ec_zy'));
    var char_zy_opt = {

        title : {
            show: false, 
            text: '专业、男女统计',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient:"verticle",
            left : 'left',
            top : 'middle',
            textStyle: {
                color:"#FFF",
            },
            data:function(){
				var arr = [];
				$.each(glbData.zyfl_rs,function(i,fl){
					arr.push(fl.type+'班');
				});
				return arr;
			}()
        },
        calculable : true,
        series : [
            {
                name:'班级类型',
                type:'pie',
                radius : [0, '90%'],
                center : ['40%', '50%'],
                lableLine: {
                    normal: {
                        show: true 
                    },
                    emphasis: {
                        show: true
                    }
                },
                itemStyle: {
                  normal: {
                      label: {
                          show: true,//是否展示  
                          position: 'inside',
                          formatter: '{b} {c}'
                      }
                  }
                }, 
				data:function(){
					var arr = [];
					$.each(glbData.zyfl_rs,function(i,fl){
						var item = {
							value:fl.sum,
							name:fl.type+"班"
						};
						arr.push(item);
					});
					return arr;
				}()
                /*data:[
                    {value:10, name:'C类'},
                    {value:5, name:'GW类'},
                    {value:15, name:'GS类'},
                    {value:25, name:'G类'},
                    {value:20, name:'Z类'},
                    {value:35, name:'J类'}
                ]*/
            },
            {
                name:'性别类型',
                type:'pie',
                radius : [0, '40%'],
                center : ['80%', '60%'],
                itemStyle: {
                  normal: {
                      label: {
                          show: true,//是否展示  
                          position: 'inside',
                          formatter: '{b} {c}'
                      }
                  }
                },  
                data:[
                    {value:glbData.znannv.nv, name:'女'},
                    {value:glbData.znannv.nan, name:'男'}
                ]
            }
        ]


    };
    char_zy.setOption(char_zy_opt);



    // 宿舍楼床位情况统计
    var char_zs_lou = echarts.init(document.getElementById('ec_zs_lou'));
    var char_zs_lou_opt = {

      title : {
          show: false, 
          text: '宿舍楼床位情况统计',
          x:'center',
          textStyle: {
            color: "#FFFFFF",
            fontSize: 12
          }
      },
      tooltip : {
          trigger: 'axis',
          axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'line'        // 默认为直线，可选为：'line' | 'shadow'
          }
      },
      color:['rgb(255,190,0)','rgb(131,188,92)'],
      //barMaxWidth:"40%",
	  grid: {
        left: '60'
	  },
      legend: {
          bottom: 'bottom',
          data: ['已住', '空闲'],
          textStyle:{
            color:"#FFF"
          },
      },
      xAxis:  {
          type: 'value',
          axisLabel: {
              textStyle: {
                  color : 'rgb(255,255,255)',
                  fontSize: 10 
              }
          },
      },
      yAxis: {
          type: 'category',
          axisLabel: {
              textStyle: {
                  color : 'rgb(255,255,255)',
                  fontSize: 10 
              }
          },
          data: function(){ 
			var lou_mcs = [];
			$.each(glbData.loudong_cw,function(i,lou){
				lou_mcs.push(lou.DY_MC.replace('宿舍',''));
			});
			return lou_mcs;
			//return ['1栋女生','2栋女生','3栋女生','2栋男生','4栋男生','5栋男生','6栋男生','7栋男生'];
		  }() 
      },
      series: [
          {
              name: '已住',
              type: 'bar',
              stack: '总量',
              label: {
                  normal: {
                      show: true
                  }
              },
              data: function(){
				var arr = [];
				$.each(glbData.loudong_cw,function(i,lou){
					arr.push(lou.yxcws);
				});
				return arr;
				  //return [320, 102, 320, 402, 52, 66, 123, 30];
			  }()
			  
          },
          {
              name: '空闲',
              type: 'bar',
              stack: '总量',
              label: {
                  normal: {
                      show: true
                  }
              },
              data: function(){
				var arr = [];
				$.each(glbData.loudong_cw,function(i,lou){
					arr.push(lou.kxcws);
				});
				return arr;
				  //return [320, 102, 320, 402, 52, 66, 123, 30];
			  }()
          }
          
      ]


    };
    char_zs_lou.setOption(char_zs_lou_opt);

	// 专业人数
	var html1 = '';
	var html2 = '';
	$.each(glbData.zy_rs,function(i,zy){
		var tr = "<tr>" 
				+  "<td scope='row'>" + zy.my_zgbm_mc + "</td>"
				+  "<td>" + zy.ZWMC + "</td>"
				+  "<td>" + zy.count + "</td>"
				+"</tr>";
		
		if( i < glbData.zy_rs.length/2 ){
			html1 += tr;
		}else{
			html2 += tr;
		}
	});
	$("#zy_rs_tbody1").html(html1);
	$("#zy_rs_tbody2").html(html2);
	
	// 班级人数
	var html1 = '';
	var html2 = '';
	$.each(glbData.bj_rs,function(i,zy){
		var tr = "<tr>" 
				+  "<td scope='row'>" + zy.my_zgbm_mc + "</td>"
				+  "<td>" + zy.BJMC + "</td>"
				+  "<td>" + zy.ZRS + "</td>"
				+"</tr>";
		
		if( i < glbData.bj_rs.length/2 ){
			html1 += tr;
		}else{
			html2 += tr;
		}
	});
	$("#bj_rs_tbody1").html(html1);
	$("#bj_rs_tbody2").html(html2);
	

}

</script>